<!--author:zk 王佳欣-->
<!DOCTYPE html>
<html xmlns:style="http://www.w3.org/1999/xhtml">
<head>
	<script type='text/javascript' src='js/jquery.min.js'></script>
	<script type='text/javascript' src='js/plugins.js'></script>
	<script type='text/javascript' src='js/script.js'></script>
	<script type='text/javascript' src='js/particles.js'></script>
	<script type='text/javascript' src='js/aos.js'></script>
	<script type='text/javascript' src='js/prism.js'></script>
	<script type='text/javascript' src='js/gravatar.js'></script>
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="New Theme Forms template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- web font -->    
<link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- //web font -->
<!--弹出框样式-->
	<style>
		#overlay {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			font-size: 16px;
			/* IE9以下不支持rgba模式 */
			background-color: rgba(0, 0, 0, 0.5);
			/* 兼容IE8及以下 */
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
			display: none;
		}
		/* 弹出框主体 */
		.popup {
			background-color: #ffffff;
			max-width: 400px;
			min-width: 200px;
			height: 240px;
			border-radius: 5px;
			margin: 200px auto;
			text-align: center;
		}
		/* 弹出框的标题 */
		.popup_title {
			height: 60px;
			line-height: 60px;
			border-bottom: solid 1px #cccccc;
		}
		/* 弹出框的内容 */
		.popup_content {
			height: 50px;
			line-height: 50px;
			padding: 15px 20px;
		}
		/* 弹出框的按钮栏 */
		.popup_btn {
			padding-bottom: 10px;
		}
		/* 弹出框的按钮 */
		.popup_btn button {
			color: #778899;
			width: 40%;
			height: 40px;
			cursor: pointer;
			border: solid 1px #cccccc;
			border-radius: 5px;
			margin: 5px 10px;
			color: #ffffff;
			background-color: #337ab7;
		}
		.button{
			font-size: 1em;
			color: #fff;
			background: transparent;
			border: 1px solid #fff;
			outline: none;
			cursor: pointer;
			padding: .6em 1em;
			-webkit-appearance: none;
			width: 100%;
			margin-top: 2em;
			transition: 0.5s all;
			-webkit-transition: 0.5s all;
			-moz-transition: 0.5s all;
			-o-transition: 0.5s all;
			-ms-transition: 0.5s all;
		}
		.button:hover {
			background: #FF9800;
			letter-spacing: 3px;
			color: #fff !important;
			border-color: #ff9800 !important;
		}
		a{
			color: #9fb1be;
		}
		a:hover{
			color: #f3a02b;
		}
	</style>

</head>
<body>
	<!-- main -->
	<div class="main">
		<h1>别叫我oj登录界面</h1>
		<div class="main-w3lsrow" style="display: flex; justify-content: center">
			<!-- login form 用form表单将前端输入的数据返回给后端-->
			<div class="login-form login-form-left" >
				<div class="agile-row">
					<h2>登录</h2>
					<div class="login-agileits-top"> 	
						<form id="login">
							<p>学号</p>
							<input type="text" id="id" class="id" name="id" required="">
							<p>密码</p>
							<input type="password" id="password" class="password" name="password" required="">
							<input type="button" class="button" onclick="login()" value="登录">
						</form>
						<div style=" text-align: center;">
<!--							点击跳转到注册界面-->
							<a href="register.html"><input type="button"class="button" value="还没有账号？点此注册"></a>
						</div>
						<div id="overlay">
							<div class="popup">
								<p class="popup_title" style="color: red">提示</p>
								<p class="popup_content">用户名或密码不存在</p>
								<div class="popup_btn">
									<button class="confirmBtn" onclick="hidePopup()">确认</button>
								</div>
							</div>
						</div>
<!--						忘记密码？-->
						<div style="float: right;margin-top: 10px"><a style="font-size: 12px" href="forgetPassword.html">忘记密码?</a></div>
					</div>
				</div>  
			</div>
			<div class="clear"> </div>	 
		</div>	
	</div>
	<script type="text/javascript">
		var userId= localStorage.getItem("userId");
		function login() {
			var md5_password=hex_md5($("#password").val());
			let user={
				"id" : $("#id").val(),
				"password" : md5_password
			};
			if(isEmpty(user.id)||isEmpty($("#password").val())){
				alert("请确保两个框都不为空！")
			}else{
				$.ajax({
					//登录连接的url
					url:"http://192.168.2.5:8010/user/login",
					type:"POST",
					contentType:'application/json; charset=utf-8',
					data:JSON.stringify(user),
					success: function (data) {
						let msg=data.msg;
						if(msg==="密码错误"){
							alert("密码错误");
						}else if(msg==="该用户不存在"){
							alert("该用户不存在");
						}else if(msg==="登录成功"){
							//将用户id和密码存session中
							localStorage.setItem("userId",user.id);
							localStorage.setItem("password",user.password);
							window.location.href="index.html";
						}
					},
					error: function (data){

						showPopup();
					}

				})
			}
		}
		function showPopup(){
			let overlay = document.getElementById("overlay");
			overlay.style.display = "block";
		}
		function hidePopup(){
			let overlay = document.getElementById("overlay");
			overlay.style.display = "none";
		}
		//判断字符串是否为空的函数 true表示是空字符串
		function isEmpty(password) {
			if(password === '' || password.trim().length === 0){
				return true;
			}else{
				return false;
			}
		}
		function getUser(){
			if (userId!=null){
				location.assign("index.html");
			}
		}
		getUser();
	</script>
</body>
</html>